<template>
  <div>
    <div id="box2" ref="unusual" class="box linefrofitbox" />
  </div>
</template>

<script>
const elementResizeDetectorMaker = require("element-resize-detector");
import { AjaxToken } from "@/api/common";
export default {
  props: {
    CpnID: "",
    ChnanelId: "",
    selectType: 0,
    StDt: "",
    EdDt: "",
    refsh: "",
  },
  data() {
    return {
      mychart: null,
      list: [],
    };
  },

  watch: {
    refsh: {
      deep: true,
      handler(val) {
        this.chart = null;
        this.initChart();
      },
    },
    CpnID: {
      deep: true,
      handler(val) {
        this.chart = null;
        this.initChart();
      },
    },
    ChnanelId: {
      deep: true,
      handler(val) {
        this.chart = null;
        this.initChart();
      },
    },
    selectType: {
      deep: true,
      handler(val) {
       this.chart = null;
        this.initChart();
      },
    },
    StDt: {
      deep: true,
      handler(val) {
        this.chart = null;
        this.initChart();
      },
    },
    EdDt: {
      deep: true,
      handler(val) {
        this.chart = null;
        this.initChart();
      },
    },
  },
  mounted() {
    this.initChart();
    var box = document.getElementById("box2");
    const erd = elementResizeDetectorMaker();
    const that = this;
    erd.listenTo(document.getElementById("box2"), function (element) {
      that.$nextTick(function () {
        // 使echarts尺寸重置
        // console.log("========");
        that.mychart.resize();
      });
    });
    window.addEventListener("resize", () => {
      this.mychart.resize();
    });
  },
  methods: {
    initChart() {
      this.mychart = this.$echarts.init(this.$refs.unusual);
        this.setOptions(this);
    },
    setOptions(thisobj) {
      this.Seach();
    },
    Seach() {
      var params = new URLSearchParams();
      params.append("CpnID", this.CpnID);
      params.append("ChannelName", this.ChnanelId);
      params.append("Tp", this.selectType);
      params.append("StDt", this.StDt);
      params.append("EdDt", this.EdDt);
      const loading = this.$loading({
        lock: true,
        text: "",
        spinner: "el-icon-loading",

        target: document.querySelector(".linefrofitbox"),
      });
      backstage.GetProfitMoneyLinkRatio(this, params, loading);
    },
  },
};
var backstage = {
  // 获取Mngrbaseinfo集合
  GetProfitMoneyLinkRatio: function (thisobj, params, loading) {
    setTimeout(function () {
      AjaxToken(
        thisobj,
        "GetProfitMoneyLinkRatio",
        params,
        "post",
        function (res) {
          loading.close();
          var linedata_y = res.data.data.linedata_y;
          var linedata_x = res.data.data.linedata_x;
          var name= res.data.data.name;
          var legenddata = [];
          legenddata.push(name);
          var option = {
            title: {
              text: "利润总额",
              textStyle: {
                // 文字颜色
                color: "rgba(0, 0, 0, 0.85)",
                // 字体风格,'normal','italic','oblique'

                // 字体粗细 'normal','bold','bolder','lighter',100 | 200 | 300 | 400...
                fontWeight: "bold",
                // 字体系列
                fontFamily: "sans-serif",
                // 字体大小
                fontSize: 16,
              },
              top: "3%",
              left: "20",
              subtext: "单位：万元", // 副标题文本
            },
            subtextStyle: {
              left: "50%",
              top: "3%",
            },

            // backgroundColor: "#fff",
            tooltip: {
              trigger: "axis",
              axisPointer: {
                type: "shadow",
                textStyle: {
                  color: "#fff",
                },
              },
              formatter: function (params) {
                //格式化函数
                // 自定义tootip显示值
                let list = [];
                let listItem = "";
                for (var i = 0; i < params.length; i++) {
                  list.push(
                     params[0].axisValue+"<br>"
                    +'<i style="display: inline-block;width: 10px;height: 10px;background: ' +
                      params[i].color +
                      ';margin-right: 5px;border-radius: 50%;}"></i><span style="width:160px; display:inline-block;">' +
                      params[0].axisValue +
                      "利润总额:" +
                      params[0].value+"万元"
                  );
                }
                 listItem = list.join('<br>')
                //  console.log(listItem);
                  return '<div class="showBox">' + listItem + '</div>'
              },
            },
            grid: {
              borderWidth: 0,
              top: 110,
              bottom: 95,
              textStyle: {
                color: "#fff",
              },
            },
            legend: {
              left: "center",
              top: "11%",
              textStyle: {
                color: "#90979c",
                fontSize: 16,
              },
              data:legenddata,
            },

            calculable: true,
            xAxis: [
              {
                type: "category",
                axisLine: {
                  lineStyle: {
                    color: "black",
                  },
                },
                splitLine: {
                  show: false,
                },
                axisTick: {
                  show: false,
                },
                data: linedata_x,
              },
            ],

            yAxis: [
              {
                type: "value",
                splitLine: {
                  show: false,
                },
                axisLine: {
                  lineStyle: {
                    color: "black",
                  },
                },
              },
            ],
            dataZoom: [
              {
                show: true,
                height: 15,
                xAxisIndex: [0],
                bottom: 30,

                start: 10,
                end: 80,
                handleIcon:
                  "path://M306.1,413c0,2.2-1.8,4-4,4h-59.8c-2.2,0-4-1.8-4-4V200.8c0-2.2,1.8-4,4-4h59.8c2.2,0,4,1.8,4,4V413z",
                handleSize: "110%",
                handleStyle: {
                  // color: "#5B3AAE",
                  color: "#409eff",
                },
                textStyle: {
                  // color: "rgba(204,187,225,0.5)",
                  color: "black", // 滑动块字体颜色
                },
                // fillerColor: "rgba(67,55,160,0.4)",
                fillerColor: "#409eff",
                borderColor: "rgba(204,187,225,0.5)",
              },
              {
                type: "inside",
                show: true,
                height: 15,
                start: 1,
                end: 35,
              },
            ],
            series: [
              {
                name: name,
                type: "line",
                symbolSize: 5,
                symbol: "circle",
                itemStyle: {
                   color: '#06C141'
                },
                markPoint: {
                  label: {
                    normal: {
                      textStyle: {
                        color: "#fff",
                      },
                    },
                  },
                  data: [
                    {
                      type: "max",
                      name: "最大值",
                    },
                    {
                      type: "min",
                      name: "最小值",
                    },
                  ],
                },
                //  areaStyle: {},//面积图
                data: linedata_y,
              },
            ],
          };
          thisobj.mychart.setOption(option);

          window.addEventListener("resize", () => {
            thisobj.mychart.resize();
          });
        },
        function (err) {}
      );
    }, 1* 1000);
  },
};
</script>

<style scoped>
.box {
  /* width: 100%; */
  /* height: 28.5rem; */
  height: 450px;
}
</style>
